<template>
  <div class="videobg">
    <div class="videobg-hero-module">
      <div class="video-container">
        <div class="filter"></div>
        <video
          autoplay="autoplay"
          loop="loop"
          muted="muted"
          class="fillWidth"
          @canplay="canplay"
          src="https://cloud.video.taobao.com//play/u/1057559553/p/2/e/6/t/1/50227372667.mp4"
        ></video>
        <div class="video-bg">
          <div class="txt">
            <span class="sp1">
              <img class="sp_l" src="/img/index-movie_1.png" alt />
              <a href="/sanyady/" target="_blank">
                <img class="sp_c" src="/img/index-movie_3.png" alt />
              </a>
              <img class="sp_r" src="/img/index-movie_2.png" alt />
            </span>
            <span class="sp2">
              <h2>ONLY MICROFILM</h2>
              <h3>双影像微电影,让旅行更有意义</h3>
            </span>
          </div>
        </div>
        <div class="poster hidden" v-if="!vedioCanPlay">
          <img src alt />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      vedioCanPlay: false
    };
  },
  methods: {
    canplay() {
      this.vedioCanPlay = true;
    }
  }
};
</script>
<style lang="scss">
.videobg {
  width: 100%;
  .homepage-hero-module,
  .video-container {
    position: relative;
    overflow: hidden;
    height: 502px;
    width: 100vw;
  }

  .video-container .poster img,
  .video-container video {
    z-index: 0;
    position: absolute;
  }

  .video-container .filter {
    z-index: 1;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
  }
  .fillWidth {
    width: 100%;
  }
  .video-bg {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 100;
    width: 100%;
    height: 100%;
    .txt {
      z-index: 200;
      position: absolute;
      bottom: 20px;
      left: 0px;
      right: 0px;
      margin: auto;
      text-align: center;
      .sp1 {
        text-align: center;
        justify-content: center;
        display: flex;
        align-items: center;
        .sp_l {
          margin-right: 15px;
        }
        .sp_r {
          margin-left: 15px;
        }
        .sp_c {
          transition: all 1s ease;
          &:hover {
            transform: rotate(360deg);
          }
        }
      }
      .sp2 {
        & h2 {
          font-family: "DINCond-Bold";
          font-size: 34px;
          color: #ff283c;
        }
        & h3 {
          font-weight: normal;
          padding-top: 5px;
          color: #fff;
        }
      }
    }
  }
}
</style>